<template>
  <div class="center-index shadow flex between">
    <div class="study shadow">
      <!-- <div class="head flex between item-center">
        <div>
          <h6 class="middle black">最近学习</h6>
          <div>
            <span class="small bold">本月学习时长</span>
            <span class="small bold" style="color: var(--color-primary);">+40分钟</span>
          </div>
        </div>
        <ul class="flex status">
          <li class="small bold" v-for="status of studyStatus" :key="status.id" :class="status.current && 'current'" @click="changeStatus(status)">
            {{ status.title }}</li>
        </ul>
      </div> -->
      <!-- <div class="list">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="课程名称" width="300">
            <template slot-scope="scope">
              <span class="small black">{{ scope.row.course_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="章节名称">
            <template slot-scope="scope">
              <span class="small">{{ scope.row.chapter_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时长">
            <template slot-scope="scope">
              <span class="small">{{ scope.row.duration || '课程时长' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="进度">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.process || 21" ></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </div> -->
      <!-- <el-pagination background layout="prev, pager, next" :total="total"
        @current-change="changePage"
      ></el-pagination> -->
    </div>
    <!-- <div class="record shadow">
      <div class="head flex between item-center">
        <div>
          <h6 class="middle black">学习记录</h6>
          <div>
            <span class="small bold">最近学习</span>
            <span class="small bold" style="color: green;">+40分钟</span>
          </div>
        </div>
      </div>
      <div class="process">
        <ul>
          <li class="clearfix" v-for="process of processData" :key="process.id"
            :class="process.status == 0 ? 'p-success' : (process.status == 1 ? 'p-normal' : 'p-error')"
          >
            <div class="left" style="margin-right: 10px;">
              <div class="circle"></div>
              <div class="line"></div>
            </div>
            <div class="left">
              <div>
                <span class="middle bold black" style="margin-right: 3px;">{{process.course_name + '-' + process.chapter_name }}</span>
                <span class="middle value"> +1</span>
              </div>
              <span class="small">{{ process.create_time }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div> -->
  </div>
</template>

<script>
import Api from '@/api'
export default {
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 7
      },
      total: 0,
      studyStatus: [
        { id: 1, title: '所有', current: true },
        { id: 2, title: '进行中', current: false },
        { id: 3, title: '已完成', current: false }
      ],
      tableData: [
        
      ],
      processData: [
        { id: 1, name: '以习近平法制思想为指导全面推进依法治国', time: '2023-02-24 08:03', status: 1 },
        { id: 2, name: '以习近平法制思想为指导全面推进依法治国', time: '2023-02-24 08:03', status: 1 },
        { id: 3, name: '以习近平法制思想为指导全面推进依法治国', time: '2023-02-24 08:03', status: -1 },
        { id: 4, name: '以习近平法制思想为指导全面推进依法治国', time: '2023-02-24 08:03', status: -1 },
        { id: 5, name: '以习近平法制思想为指导全面推进依法治国', time: '2023-02-24 08:03', status: 0 },
        { id: 6, name: '以习近平法制思想为指导全面推进依法治国', time: '2023-02-24 08:03', status: 0 }
      ]
    }
  },
  mounted() {
    // this.getCourse()
    // 学习记录
    this.getRecordLimit8()
    // 最新学习
    this.getRecord()
  },
  methods: {
    changeStatus(status) {
      this.studyStatus.forEach(item => item.current = item.id === status.id)
    },
    getRecord() {
      Api.findStudyRecordListPage(this.params).then(res => {
        this.total = res.data.total
        this.tableData = res.data.rows || []
      })
      
    },
    changePage(val) {
      this.params.pageNum = val
      this.getRecord()
    },
    getRecordLimit8(params = {pageNum: 1, pageSize: 8}) {
      Api.findStudyRecordListPage(params).then(res => {
        this.processData = res.data.rows
      })
    } ,
  }
}
</script>

<style lang="scss" scoped>
$--success: green;
$--normal: #ccc;
$--error: #e91400;
.current {
  color: var(--color-primary);
  border-color: var(--color-primary) !important;
}
.p-success {
  .circle {
    border-color: $--success !important;
  }
  .line {
    background-color: $--success !important;
  }
  .value {
    color: $--success !important;
  }
}

.p-normal {
  .circle {
    border-color: $--normal !important;
  }
  .line {
    background-color: $--normal !important;
  }
  .value {
    color: $--normal !important;
  }
}

.p-error {
  .circle {
    border-color: $--error !important;
  }
  .line {
    background-color: $--error !important;
  }
  .value {
    color: $--error !important;
  }
}

.center-index {
  .study {
    flex: 2;
    padding: 10px;
    .head {
      .status {
        li {
          width: 64px;
          text-align: center;
          padding: 5px 10px;
          cursor: pointer;
          border: 1px solid #ccc;
        }
      }
    }
    .list {
      /deep/ .el-table th.el-table__cell > .cell {
        font-size: 12px !important;
        font-weight: bold;
      }
      /deep/ .el-progress__text {
        font-size: 12px !important;
      }
    }
  }
  .record {
    flex: 1;
    padding: 10px;
    .process {
      margin-top: 15px;
      li {
        height: 50px;
        &>div:first-of-type {
          height: 100%;
          position: relative;
          .circle {
            width: 12px;
            height: 12px;
            border-width: 4px;
            border-style: solid;
            border-radius: 50%;
          }
          .line {
            width: 2px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 12px;
            bottom: 0;
            background-color: var(--color-primary);
          }
        }
      }
    }
    
  }
}
</style>